<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Koala - Settings</title>
	<link type="text/css" rel="stylesheet" href="../css/settings.css">
	<script type="text/javascript" src="../libs/jquery-1.9.1.min.js"></script>
	<style type="text/css">
		
	</style>
</head>
<body class="win32">
	<div id="window">
		<h1 id="titlebar">
			Settings
			<span class="close">×</span>
		</h1>
		<div id="outer">
			<div id="inner">
				<ul id="nav">
					<li data-rel="#general_options" class="current">General</li>
					<li data-rel="#less_options">Less</li>
					<li data-rel="#sass_options">Sass</li>
					<li data-rel="#compass_options">Compass</li>
					<li data-rel="#coffee_options">CoffeeScript</li>
					<li data-rel="#advanced_options">Advanced</li>
					<li data-rel="#help_options">Help</li>
					<li data-rel="#about_options">About</li>
				</ul>
				<div id="content">
					<!-- General options -->
					<div id="general_options">
						<h2>General</h2>
						<div class="optionbox">
							<p class="selectitem mb5">
								Language:
								<select id="locales">
									<option value="en_us" name="en_us">English</option>
									<option value="zh_cn" name="zh_cn">中文</option>
									<option value="ja_jp" name="ja_jp">日本語</option>
								</select>
							</p>
							<label>
								<input type="checkbox" id="minimizeToTray" /> Minimize To Tray
							</label><br>
							<label>
								<input type="checkbox" id="minimizeOnStartup" /> Minimize On Startup
							</label>
							<p class="mt5">Filter:<input type="text" id="filter" placeholder="e.g., *.lib.less,*.src.sass"/></p>
						</div>
					</div>
		
					<!-- less options -->
					<div id="less_options" class="hide">
						<h2>Less</h2>
						<h3>Default Options</h3>
						<div class="optionbox">
							<label>
								<input type="checkbox" class="compile_option" data-name="lineComments" data-rel="less"> line comments
							</label><br>
							<label>
								<input type="checkbox" class="compile_option" data-name="debugInfo" data-rel="less"> debug info
							</label>
							<p class="mb5">
								Output Style
								<select class="compile_option" data-rel="less" data-name="outputStyle">
									<option value="">normal</option>
									<option value="compress">compress</option>
									<option value="yuicompress">yuicompress</option>
								</select>
							</p>
						</div>
						<h3>Advanced</h3>
						<p class="optionbox">Using System Commands: <br>
							<label>
								<input type="checkbox" id="systemcommand_lessc"> lessc
							</label><br>
							<label>
								<input type="checkbox" id="systemcommand_lessc"> lessc
							</label><br>
							<label>
								<input type="checkbox" id="systemcommand_lessc"> lessc
							</label><br>
						</p>
						<h3>Libraries Version</h3>
						<div class="optionbox">
							Less: 1.4.1 <br>
							Less: 1.4.1 <br>
							Less: 1.4.1 <br>
							Less: 1.4.1 <br>
						</div>
						<!-- If this is a extension -->
						<h3>Maintainers</h3>
						<div class="optionbox">
							<a href="http://oklai.name" class="externalLink">Ethan Lai</a> &lt;lain.z.q@gmail.com&gt;<br>
							Project: <a href="#">http://koala-app.com</a>
						</div>
						<button class="">Uninstall This Compiler</button>
					</div>
					
					<!-- compass options -->
					<div id="compass_options" class="hide">
						<h2>Compass</h2>
						<div class="mt10">
							Just edit the config.rb file under the project directory.
							<br>
							If the directory don't have this file, you can create one according to the following: <br>
							right-click project item --> project settings --> new settings --> for compass.
							<br>
							If the config.rb file in another directory, move to the root directory of the project and modify the "http_path" attributes.
						</div>
					</div>
					
					
					<!-- advanced_options -->
					<div id="advanced_options" class="hide">
						<h2>Advanced</h2>
						<p class="mt10"><button>Open Extensions Folder</button></p>
					</div>
					
					<!-- help_options -->
					<div id="help_options" class="hide">
						<h2>Help</h2>
						<p class="mt10">
							Docs: <a class="externalLink" id="link_docs" href="https://github.com/oklai/koala/wiki">https://github.com/oklai/koala/wiki</a><br>
							Bug Report: <a class="externalLink" id="link_issues" href="https://github.com/oklai/koala/wiki">https://github.com/oklai/koala/issues</a><br>
						</p>
					</div>
					
					<div id="about_options" class="hide">
						<h2>About</h2>
						<div id="about">
							Copyright (c) 2013 <a class="externalLink" href="http://oklai.name">Ethan Lai</a><br>
							Project Website: <a href="#" class="externalLink" id="link_project"></a><br>
							<div id="upgradetips">
								<p class="update">
									Koala v<span id="newVersion"></span> now available,
									<a href="#" class="externalLink" id="link_download">Download Now</a>.
								</p>
								<p class="noupdate" style="display:block">This is the lastest version.</p>
							</div>
							Version: v<span id="koalaVersion"></span><button id="checkupgrade">Check Upgrade</button><span id="upgradeloading">Checking...</span><br>
							Contributors: <a class="externalLink" href="http://weibo.com/cooldz">Max Deng</a>, <a class="externalLink" href="http://t.qq.com/se7en860313">Leott Liu</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer id="footer">
			<div class="border"></div>
			<button id="ok">Ok</button>
			<button id="cancel">Cancel</button>
		</footer>
	</div>

	<script type="text/javascript">
	$('#nav li').click(function () {
		if ($(this).hasClass('current')) return false;
		
		var rel = $(this).data('rel');
		$($('#nav li.current').data('rel')).hide();
		$(rel).show();

		$('.current').removeClass('current');
		$(this).addClass('current');
	});
	</script>
</body>
</html>